<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>教室列表</title>
</head>
<!-- 引入 layui.css -->
<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
<!-- 引入 layui.js -->
<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="../../js/fun.js"></script>
<body>

<table id="demo" lay-filter="demo" style="text-align: center"></table>


</body>
<div id="detail" hidden>

</div>

<script id="detailform" type="text/html">
    <form class="layui-form" action="" style="margin-top: 5%;text-align: center">

        <div class="layui-form-item">
            <label class="layui-form-label">课程编号</label>
            <div class="layui-input-inline">
                <input type="text" name="password" class="layui-input" disabled value="{{d.id}}">
            </div>

        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">课程名称</label>
            <div class="layui-input-inline">
                <input type="text" name="password" class="layui-input" disabled value="{{d.name}}">
            </div>

        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">课程所属专业</label>
            <div class="layui-input-inline">
                <input type="text" name="password" class="layui-input" disabled value="{{d.majorname}}">
            </div>

        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">课程时间</label>
            <div class="layui-input-inline">
                <input type="text" name="password" class="layui-input" disabled value="{{d.timecontent}}">
            </div>
            <div class="layui-form-mid layui-word-aux">{{d.timedetail}}</div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">教室地点</label>
            <div class="layui-input-inline">
                <input type="text" name="password" class="layui-input" disabled value="{{d.roomaddress}}">
            </div>

        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">教室名称</label>
            <div class="layui-input-inline">
                <input type="text" name="password" class="layui-input" disabled value="{{d.roomname}}">
            </div>

        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">教师姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="password" class="layui-input" disabled value="{{d.teachername}}">
            </div>

        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">教师性别</label>
            <div class="layui-input-inline">
                <input type="text" name="password" class="layui-input" disabled value="{{d.teachersex}}">
            </div>

        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">教师职称</label>
            <div class="layui-input-inline">
                <input type="text" name="password" class="layui-input" disabled value="{{d.teachertitle}}">
            </div>

        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="button" class="layui-btn" id="select" onclick="select()" value="选择">
            </div>
        </div>

    </form>
</script>
<script>
    layui.use(['table','layer','laytpl','form'], function(){
        window.table = layui.table;
        window.layer = layui.layer
        window.laytpl = layui.laytpl
        window.form = layui.form
        //第一个实例
        courselist =  table.render({
            elem: '#demo'
            ,height: 600
            ,url: Api+'/co/getRooms'//数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'id', title: '教室编号', width:250, sort: true, fixed: 'left',event:"id"}
                ,{field: 'name', title: '教室名称', width:250}
                ,{field: 'address', title: '教室地址', width:250, sort: true}
                ,{field: 'detail', title: '教室介绍', width:250}
                ,{field: 'code', title: '是否显示', width:250}

            ]]
        });

        // 监听表格动态
        table.on('tool(demo)', function(obj) {
            window.course = obj.data
            var getTpl = detailform.innerHTML
                ,view = document.getElementById('detail');
            laytpl(getTpl).render(course, function(html){
                view.innerHTML = html;


                $.post(Api+"/course/isSelect",{
                    stuid:getCookie("userid"),
                    courseid:course.id
                },function (res){
                    if(res.code == "204"){
                        //    可以选择

                        $("#select").val("选择")

                        $("#select").click(function (){
                            select()
                        })
                    }else {
                        //    不可以选择
                        $("#select").addClass("layui-btn-danger")
                        $("#select").val("退选")
                        $("#select").click(function (){
                            del()
                        })
                    }
                })
                form.render()
            });

            layer.open({
                type:1,
                content:$("#detail"),
                area: ['550px', '500px'],
                title:"课程详情",
                cancel:function (){
                    $("#detail").hide()
                }
            })
        })

    });



    //    选择
    function select(){

        layer.confirm('确认选中这门课程吗?',{
            btn:["我就喜欢"+course.name,"点错了"]
        },function (){
            //    这里添加选课
            $.post(Api+"/course/select",{
                    stuid:getCookie("userid"),
                    courseid:course.id
                },
                function (res){
                    if(res.code == "200"){
                        layer.msg("选课成功")
                        setTimeout(function (){
                            layer.closeAll()
                        },1000*2)
                    }else {
                        layer.msg("选课失败")
                    }
                }
            )
        },function (){
            layer.msg("同学，请三思而选课哦")
        })
    }

    function del(){
        layer.confirm('确认不要这门课程吗?',{
            btn:["真讨厌，快删掉","点错了"]
        },function (){
            //    这里添加选课
            $.post(Api+"/course/delSelect",{
                    stuid:getCookie("userid"),
                    courseid:course.id
                },
                function (res){
                    if(res.code == "200"){
                        layer.msg("退课成功")
                        setTimeout(function (){
                            layer.closeAll()
                        },2000)
                    }else {
                        layer.msg("退课失败")
                    }
                }
            )
        },function (){
            layer.msg("OK明白了")
        })
    }



</script>
</html>